<!DOCTYPE html>
<html>
<head>
  <style>
    .text-container {
      -webkit-columns: 100px 2; /* Chrome, Safari, Opera */
      -moz-columns: 100px 2;    /* Firefox */
      columns: 100px 2;         /* Standard syntax */
    }

    p {
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
      page-break-inside: avoid;            /* Firefox */
      break-inside: avoid-column;          /* Standard syntax */
    }

    .english {
      color: blue;
    }

    .chinese {
      color: red;
    }

  </style>
</head>
<body>
<div class="text-container">
  <p>
    <span class="english">英文文本 starts here and wraps to the next line,starts here and wraps to the next linestarts here and wraps to the next linestarts here and wraps to the next linestarts here and wraps to the next line</span>
    <span class="chinese">中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，中文文本开始这里也换行到下一行，</span>
  </p >
  <p>
    <span class="english">continues the English text to wrap again,continues the English text to wrap again,continues the English text to wrap again,continues the English text to wrap again,continues the English text to wrap again,continues the English text to wrap again,continues the English text to wrap again,</span>
    <span class="chinese">继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。继续中文文本到下一行换行。</span>
  </p >
</div>
</body>
</html>